import React, { Component } from 'react';
import {
  View, Text, StyleSheet, TouchableOpacity, Image
} from 'react-native';
import { style } from '../../theme/style';
export class NewAccount extends Component {

  constructor(props) {
    super(props)
    this.state = {
      choice: '',
      alertShow: false
    }
  }
  componentWillUnMount () {
  }
  componentWillReceiveProps (props) {
    let { choice } = props || {};
    if (choice) {
      this.setState({
        choice: choice
      })
    }
  }
  selectAlert () {
    this.setState({ alertShow: true }, () => {
      this.props.fn(this.state.alertShow)
    })
  }
  render () {
    let { accountStyles, textColor, imgUrl, imgStyle, choice } = this.props;
    let uriImg = require('../../imgs/downAccount.png');
    return (
      <View style={[styles.container, accountStyles]}>
        <TouchableOpacity style={styles.selectBox} onPress={this.selectAlert.bind(this)}>
          <Text numberOfLines={1} style={[styles.select, textColor]}>{choice}</Text>
          <Image style={[styles.down, imgStyle]} source={imgUrl ? imgUrl : uriImg} />
        </TouchableOpacity>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: style.color.themeColor,
    height: 30,
    paddingTop: 5,
    paddingRight: 20
  },
  selectBox: {
    position: 'relative',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  select: {
    fontWeight: '600',
    color: '#fff',
  },
  down: {
    width: 16,
    height: 16,
    tintColor: '#fff',
    marginLeft: 10
  }
})